<template>
	<view class="content">

		<text style="display:block;padding: 16upx 30upx 10upx;lihe-height: 1.6;color: #fa436a;font-size: 24upx;">选择你的取货地址，校园大使会来此地址取包裹。</text>
		<!-- 地址 -->
		<navigator url="/pages/address/address?source=1" class="address-section">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{ addressData.name }}</text>
						<text class="mobile">{{ addressData.phone }}</text>
					</view>
					<text class="address">{{ addressData.school }} {{ addressData.dom }}</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>

			<image
				class="a-bg"
				src=""
			></image>
		</navigator>

		<view class="row b-b margin-top">
			<text class="tit">收货人</text>
			<input class="input" type="text" v-model="address.name" placeholder="请输入收货人~" placeholder-class="placeholder text-sm" />
		</view>
		<view class="row b-b">
			<text class="tit">联系</text>
			<input class="input" type="number" v-model="address.phone" placeholder="请输入收货人联系号码^_^" placeholder-class="placeholder text-sm" />
		</view>
		<view class="cu-form-group"><textarea maxlength="-1" v-model="address.msg" :placeholder="msg" placeholder-class="placeholder text-sm"></textarea></view>

		<button class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			address:{
				name:null,
				phone:null,
				msg:null
			},
			addressData: {
				name: '点击选择取货地址',
				phone: '',
				school: '',
				dom: '',
			},
			msg: '详细地址：精确到道路、门牌号、小区、楼栋号、单元室等'
		};
	},
	computed: { ...mapState(['user']) },
	onLoad(option) {},
	methods: {
		//提交
		async confirm() {
			const { name,phone,msg } = this.address
			let loc_id = this.addressData.id
			const { id,school_id } = this.user
			if (!loc_id) { this.$api.msg('请选择收货位置~'); return; }
			if (!name) { this.$api.msg('请填写收货人~'); return; }
			if (!this.$regex.phoneP.test(phone)) {this.$api.msg('电话号码不合法~') ; return; }
			if (!msg) { this.$api.msg('请填写收件人地址~'); return; }
			// 创建订单
			let lsend = await this.$apis.lsend.create(id,loc_id,0,name,phone,msg,school_id)
			let tran = await this.$apis.cart.createLsend(id,-2,1,lsend.data.id,0,loc_id,0)
			// u,t,n,ls,c,loc,j
			console.log(lsend,tran)
			if(lsend && tran){ 
				uni.showModal({
					content: '订单创建成功,等待校园大使接单后前往购物车支付哈^_^',
					success: e => { if (e.confirm) uni.switchTab({ url: '/pages/cart/cart' })}
				});				
			}
			else this.$api.msg('订单创建失败')
		}
	}
};
</script>

<style lang="scss">
	
page {
	background: $page-color-base;
	padding-top: 16upx;
}

.address-section {
	padding: 30upx 0;
	background: #fff;
	position: relative;

	.order-content {
		display: flex;
		align-items: center;
	}

	.icon-shouhuodizhi {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90upx;
		color: #888;
		font-size: 44upx;
	}

	.cen {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 28upx;
		color: $font-color-dark;
	}

	.name {
		font-size: 34upx;
		margin-right: 24upx;
	}

	.address {
		margin-top: 16upx;
		margin-right: 20upx;
		color: $font-color-light;
	}

	.icon-you {
		font-size: 32upx;
		color: $font-color-light;
		margin-right: 30upx;
	}

	.a-bg {
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: 5upx;
	}
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 120upx;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.icon-shouhuodizhi {
		font-size: 36upx;
		color: $font-color-light;
	}
}
.default-row {
	margin-top: 16upx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16upx) scale(0.9);
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 60upx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
